<html>

<head>
    <meta charset="utf-8" />
    <!--
       样式表分类：外部样式表
                 内部样式表
                 内联样式表 
                 多重样式表
                
-->
    <link rel="stylesheet" type="text/css" href="../css/index.css" />
    <style>
        h3 {
            text-align: right;
            font-size: 20pt;
            outline-style: dotted;
            outline-color: #00ff00;
        }
    </style>
    <style>
        span.red {
            color: red;
        }
    </style>

    <style type="text/css">
        p.tip span {
            font-weight: bold;
            color: #FF55D4;
        }
    </style>

    <!--类选择器，在css中类选择器以一个点号显示，下面例子中所有拥有center类的html元素均有此css属性类名的第一个字符不能使用数字！-->
    <style>
        .cities {
            background-color: red;
            color: green;
            margin: 20px;
            padding: 20px;
        }
    </style>

    <style>
        .fancy td {
            color: #f60;
            background: #666;
        }
    </style>

    <!--
           id选择器可以为标有特定id的html元素指定特定的样式。id选择器以#来定义
           下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：
           id 属性只能在每个 HTML 文档中出现一次
        -->
    <style>
        #red {
            color: red;
        }
        
        #green {
            color: green;
        }
    </style>
    <style>
        #sidebar p {
            font-style: italic;
            text-align: right;
            margin-top: 0.5em;
            color: #FF55D4
        }
        
        #sidebar h2 {
            font-size: 1em;
            font-weight: normal;
            font-style: italic;
            margin: 0;
            line-height: 1.5;
            text-align: right;
            color: #545454
        }
    </style>
    <!--属性选择器 对带有指定属性的html元素设置样式，可以为拥有指定属性的html元素设置样式，而不仅限于class和id属性。
        只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。
    下面的例子为带有 title 属性的所有元素设置样式：
    -->
    <style type="text/css">
        [title] {
            color: red;
        }
    </style>
    <style type="text/css">
        [title=W3School] {
            border: 5px solid blue;
        }
    </style>

    <style type="text/css">
        [lang|=en] {
            color: red;
        }
    </style>
</head>

<body>
    <div class="fancy">
        <td>

        </td>
        <p>

        </p>
    </div>
    <Text id="red">dskfkasdjfksadl</Text>

    <!--div标签是块级元素，作用于一整块的内容-->
    <div id="green" style="color:antiquewhite;background:green">
        <h1>这是一级标题</h1>
        <p>这是一个段落</p>
        <p id="sidebar">我是p中的siderbar</p>
        <p>我不是p中的sidebar</p>
    </div>

    <!--span标签是内联元素，作用与一行的内容-->
    <p><span>some text.</span>some other text.</p>
    <p class="tip"><span>提示：</span>... ... ...</p>

    <!--对 HTML 进行分类（设置类），使我们能够为元素的类（class）定义 CSS 样式。为相同的类设置相同的样式，或者为不同的类设置不同的样式。设置 <div> 元素的类，使我们能够为相同的 <div> 元素设置相同的类：-->
    <div class="cities">
        <h2>London</h2>
        <h2 id="sidebar">我是sidebar</h2>
        <h2>我不是sidebar</h2>
        <p>
            London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
        </p>
    </div>

    <div class="cities">
        <h2>Paris</h2>
        <p>Paris is the capital and most populous city of France.</p>
    </div>

    <div class="cities">
        <h2>Tokyo</h2>
        <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
    </div>
    <!--html中使用<span>元素，能够设置<span>元素的类，能够为相同的<span>元素设置相同的样式-->
    <h1>My <span class="red">Important</span> Heading</h1>
    <h1>My <span class="red">sdkfjlaksjdfl</span> sadfsd</h1>

    <h1>可以应用样式：</h1>
    <h2 title="Hello world">Hello world</h2>
    <a title="W3School" href="http://w3school.com.cn">W3School</a>

    <hr />

    <h1>无法应用样式：</h1>
    <h2>Hello world</h2>
    <a href="http://w3school.com.cn">W3School</a>

    <h1>可以应用样式：</h1>
    <img title="W3School" src="../resource/abc.png" />
    <br />
    <a title="W3School" href="http://w3school.com.cn">jsakdfhajask</a>
    <hr />

    <h1>无法应用样式：</h1>
    <p title="greeting">Hi!</p>
    <a class="W3School" href="http://w3school.com.cn">W3School</a>

    <!--下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：-->
    <h1>可以应用样式：</h1>
    <p lang="en">Hello!</p>
    <p lang="en-us">Hi!</p>
    <hr />

    <h1>无法应用样式：</h1>
    <p lang="us">Hi!</p>
    <p lang="zh">Hao!</p>

    <div class="isp">
        <p id="pdiv">
            这是一个外部样式表
        </p>
    </div>
    <!--内联样式表-->
    <p style="color: sienna; margin-left: 20px">
        This is a paragraph
    </p>
    <!--假如拥有内部样式表的这个页面同时与外部样式表链接，
    那么 h3 得到的样式是：即颜色属性将被继承于外部样式表，
    而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。
    如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
-->
    <h3>这是一个多重样式表</h3>
</body>


</html>